<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_banners
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

require_once JPATH_ROOT . '/components/com_banners/helpers/banner.php';
$baseurl = JURI::base();
$loai 		= $params->get('loai',	1);
$catid 		= $params->get('catid',  '');
if($loai==0){
?>
<div class="bannergroup<?php echo $moduleclass_sfx ?>">
<?php if ($headerText) : ?>
	<?php echo $headerText; ?>
<?php endif; ?>

<?php foreach ($list as $item) : ?>
	<div class="banneritem">
		<?php $link = JRoute::_('index.php?option=com_banners&task=click&id='. $item->id);?>
		<?php if ($item->type == 1) :?>
			<?php // Text based banners ?>
			<?php echo str_replace(array('{CLICKURL}', '{NAME}'), array($link, $item->name), $item->custombannercode);?>
		<?php else:?>
			<?php $imageurl = $item->params->get('imageurl');?>
			<?php $width = $item->params->get('width');?>
			<?php $height = $item->params->get('height');?>
			<?php if (BannerHelper::isImage($imageurl)) :?>
				<?php // Image based banner ?>
				<?php $alt = $item->params->get('alt');?>
				<?php $alt = $alt ? $alt : $item->name; ?>
				<?php $alt = $alt ? $alt : JText::_('MOD_BANNERS_BANNER'); ?>
				<?php if ($item->clickurl) :?>
					<?php // Wrap the banner in a link?>
					<?php $target = $params->get('target', 1);?>
					<?php if ($target == 1) :?>
						<?php // Open in a new window?>
						<a
							href="<?php echo $link; ?>" target="_blank"
							title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8');?>">
							<img
								src="<?php echo $baseurl . $imageurl;?>"
								alt="<?php echo $alt;?>"
								<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
								<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
							/>
						</a>
					<?php elseif ($target == 2):?>
						<?php // open in a popup window?>
						<a
							href="<?php echo $link;?>" onclick="window.open(this.href, '',
								'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550');
								return false"
							title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8');?>">
							<img
								src="<?php echo $baseurl . $imageurl;?>"
								alt="<?php echo $alt;?>"
								<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
								<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
							/>
						</a>
					<?php else :?>
						<?php // open in parent window?>
						<a
							href="<?php echo $link;?>"
							title="<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8');?>">
							<img
								src="<?php echo $baseurl . $imageurl;?>"
								alt="<?php echo $alt;?>"
								<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
								<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
							/>
						</a>
					<?php endif;?>
				<?php else :?>
					<?php // Just display the image if no link specified?>
					<img
						src="<?php echo $baseurl . $imageurl;?>"
						alt="<?php echo $alt;?>"
						<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
						<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
					/>
				<?php endif;?>
			<?php elseif (BannerHelper::isFlash($imageurl)) :?>
				<object
					classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
					<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
					<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
				>
					<param name="movie" value="<?php echo $imageurl;?>" />
					<embed
						src="<?php echo $imageurl;?>"
						loop="false"
						pluginspage="http://www.macromedia.com/go/get/flashplayer"
						type="application/x-shockwave-flash"
						<?php if (!empty($width)) echo 'width ="'. $width.'"';?>
						<?php if (!empty($height)) echo 'height ="'. $height.'"';?>
					/>
				</object>
			<?php endif;?>
		<?php endif;?>
		<div class="clr"></div>
	</div>
<?php endforeach; ?>

<?php if ($footerText) : ?>
	<div class="bannerfooter">
		<?php echo $footerText; ?>
	</div>
<?php endif; ?>
</div>
<?php
}
else if($loai==1){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading1" class="loader"></div>
        <div id="slideshow1" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs1" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs1 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs1').galleriffic({
			delay:                     5000,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow1',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading1',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 1000, 
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");
		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="2"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading2" class="loader"></div>
        <div id="slideshow2" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs2" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs2 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs2').galleriffic({
			delay:                     5100,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow2',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading2',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");
		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="3"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading3" class="loader"></div>
        <div id="slideshow3" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs3" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs3 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs3').galleriffic({
			delay:                     5200,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow3',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading3',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");
		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="4"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading4" class="loader"></div>
        <div id="slideshow4" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs4" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs4 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs4').galleriffic({
			delay:                     5300,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow4',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading4',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="5"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading5" class="loader"></div>
        <div id="slideshow5" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs5" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs5 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs5').galleriffic({
			delay:                     5400,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow5',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading5',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="6"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading6" class="loader"></div>
        <div id="slideshow6" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs6" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs6 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs6').galleriffic({
			delay:                     5500,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow6',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading6',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="7"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading7" class="loader"></div>
        <div id="slideshow7" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs7" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs7 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs7').galleriffic({
			delay:                     5600,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow7',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading7',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="8"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading8" class="loader"></div>
        <div id="slideshow8" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs8" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs8 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs8').galleriffic({
			delay:                     5700,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow8',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading8',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="9"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading9" class="loader"></div>
        <div id="slideshow9" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs9" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs9 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs9').galleriffic({
			delay:                     5800,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow9',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading9',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="10"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading10" class="loader"></div>
        <div id="slideshow10" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs10" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs10 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs10').galleriffic({
			delay:                     5900,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow10',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading10',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="11"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading11" class="loader"></div>
        <div id="slideshow11" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs11" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs11 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs11').galleriffic({
			delay:                     6000,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow11',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading11',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
else if($loai=="12"){
	$db = & JFactory::getDBO();
	$sql="SELECT * from #__banners where catid='".$catid[0]."' and state=1";
	$db->setQuery($sql);
	$rows = $db->loadObjectList();
	$rowsmain0	=	$rows[0]->params;
	$rowsmain1	=	explode('","',$rowsmain0);
	$rowsmain2	=	explode('":"',$rowsmain1[0]);
	$rowsmain	=	str_replace('\/','/',$rowsmain2[1]);
?>

<link rel="stylesheet" href="templates/protostar/css/galleriffic-5.css" type="text/css" />
<script type="text/javascript" src="templates/protostar/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="templates/protostar/js/jquery.opacityrollover.js"></script>

<div class="content">
    <div class="slideshow-container">
        <div id="loading12" class="loader"></div>
        <div id="slideshow12" class="slideshow"></div>
    </div>
</div>
<div class="navigation-container">
    <div id="thumbs12" class="navigation">
        <ul class="thumbs noscript">
            
            <?php
			for($i=0;$i<count($rows);$i++){
			$rows0	=	$rows[$i]->params;
			$rows1	=	explode('","',$rows0);
			$rows2	=	explode('":"',$rows1[0]);
			$rows3	=	str_replace('\/','/',$rows2[1]);
			?>
            	<li>
                    <a class="thumb" href="<?php echo $rows3;?>">
                        <img src="<?php echo $rows3;?>" />
                    </a>
                </li>
			<?php
			}
			?>   
            
        </ul>
    </div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('div.content').css('display', 'block');
		var onMouseOutOpacity = 0.67;
		$('#thumbs12 ul.thumbs li, div.navigation a.pageLink').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		var gallery = $('#thumbs12').galleriffic({
			delay:                     6100,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            false,
			enableBottomPager:         false,
			imageContainerSel:         '#slideshow12',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading12',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             true,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
				this.$captionContainer.find('div.photo-index')
					.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
				var nextPageLink = this.find('a.next').css('visibility', 'hidden');
				if (this.displayedPage > 0)
					prevPageLink.css('visibility', 'visible');
				var lastPage = this.getNumPages() - 1;
				if (this.displayedPage < lastPage)
					nextPageLink.css('visibility', 'visible');
				this.fadeTo('fast', 1.0);
			}
		});
		gallery.find('a.prev').click(function(e) {
			gallery.previousPage();
			e.preventDefault();
		});
		gallery.find('a.next').click(function(e) {
			gallery.nextPage();
			e.preventDefault();
		});
		function pageload(hash) {
			if(hash) {
				$.galleriffic.gotoImage(hash);
			} else {
				gallery.gotoIndex(0);
			}
		}
		$.historyInit(pageload, "advanced.html");

		$("a[rel='history']").live('click', function(e) {
			if (e.button != 0) return true;
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$.historyLoad(hash);
			return false;
		});
	});
</script>
<?php
}
if($loai==100){
?>
<div id="slider">
    <div class="flexslider">
        <div class="slider-wrap">
        <?php 
		for($i=0;$i<count($list);$i++){	
		$item = $list[$i];

		//Get the alt of the banner image
		$alt = $item->params;
		$alt = explode('","', $alt);
		$alt = explode('":"', $alt[3]);	
		$alt = explode('"}', $alt[1]);
		$alt = $alt[0];
		?>
            <div class="slide">
                <img src="<?php echo $item->params->get('imageurl');?>" title="<?php echo $item->name;?>" alt="<?php echo $alt;?>"/>
                <div class="slide-caption"><?php echo $item->name;?></div>
            </div>
		<?php 
		}
		?>
        </div>
    </div>
</div>
<script type="text/javascript">
	jQuery(window).load(function(){
		jQuery(".flexslider").flexslider({
			selector:".slider-wrap > .slide",
			animation:"slide",
			easing:"easeOutExpo",
			direction:"horizontal",
			slideshowSpeed:5000,
			animationSpeed:550,
			pauseOnAction:true,
			pauseOnHover:true,
			useCSS:true,
			touch:true,
			video:true,
			controlNav:false,
			directionNav:true,
			keyboard:true
		})
	});
</script>
<?php
}
if($loai==101){
?>
<div class="ourpartners">
    <h4><?php echo JText::_('Our Partners')?></h4>
    <div class="home-client-list clearfix">
        <div id="home-client-list">
			<?php 
            for($i=0;$i<count($list);$i++){
				$item = $list[$i];
				$link = JRoute::_('index.php?option=com_banners&task=click&id='. $item->id);
            ?>
                <a href="<?php echo $link; ?>" target="_blank"><img src="<?php echo $item->params->get('imageurl');?>" class="imgfade" /></a>
            <?php 
            }
            ?>
        </div>
        <div id="clients-arrow-up"></div>
        <div id="clients-arrow-down"></div>
        <script type="text/javascript">
        jQuery("#home-client-list").carouFredSel({
			circular:true,
			responsive:true,
			auto:{pauseDuration:1500},
			items:2,
			scroll:{
				pauseOnHover:true,
				items:"page",
				duration:750,
				easing:"easeOutExpo",
				wipe:true
			},
			direction:"up",
			prev:{button:"#clients-arrow-up",key:"left"},
			next:{button:"#clients-arrow-down",key:"right"}
        });
        </script>
    </div>
</div>
<?php
}
?>
